<template>
	<el-card>
		<div slot="header">
			<span>管理员列表</span>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#" prop="user_id" type="index">
			</el-table-column>
			<el-table-column prop="username" label="用户名">
			</el-table-column>
			<el-table-column prop="fullname" label="姓名">
			</el-table-column>
			<el-table-column prop="sex" label="性别">
			</el-table-column>
			<el-table-column prop="tel" label="手机">
			</el-table-column>
			<el-table-column prop="email" label="邮箱">
			</el-table-column>
			<el-table-column prop="avatar" label="头像">
				<template slot-scope="scope">
					<el-avatar shape="square" :src="scope.row.avatar"></el-avatar>
				</template>
			</el-table-column>
			<el-table-column label="角色" prop="role_name">
				<template slot-scope="scope">
					<el-tag size="medium">{{ scope.row.role_name }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="usable" label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.usable === 1" type="success">正常</el-tag>
					<el-tag v-if="scope.row.usable === -1" type="warning">审核中</el-tag>
					<el-tag v-if="scope.row.usable === -2" type="info">禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="240">
				<template slot-scope="scope">
					<el-link :href="`/#/system/admin/edit/${scope.row.user_id}`" class="edit-link">
						<el-button v-permission="'admin:edit'" type="info">编辑</el-button>
					</el-link>
					<el-button v-permission="'system:admin:audit'" type="danger">审核</el-button>
					<el-button v-permission="'system:admin:remove'" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
import { Admin } from '@/api';
export default {
	data() {
		return {
			tableData: [],
		}
	},
	created() {
		this.loadList();
	},
	mounted() { },
	methods: {
		// 加载列表
		async loadList() {
			let { status, msg, data } = await Admin.list({ pagesize: 20 });
			if (status) {
				this.tableData = data;
			}
		},
	},
}
</script>

<style>
.edit-link{
	margin-right: 10px;
}
</style>
